<?php
session_start();

// 检查用户是否登录
if (!isset($_SESSION['username'])) {
    header('Location: login.php');
    exit();
}

$currentUser = $_SESSION['username'];

// 文件路径
$titlesFile = __DIR__ . '/ch.json';         // 用户称号数据
$pointsFile = __DIR__ . '/points.json';      // 用户点数数据
$shopFile = __DIR__ . '/chshop.json';        // 称号商店数据
$logFile = __DIR__ . '/titles_system.log';    // 操作日志文件

// 确保文件存在
if (!file_exists($titlesFile)) {
    file_put_contents($titlesFile, json_encode([]));
}

if (!file_exists($pointsFile)) {
    file_put_contents($pointsFile, json_encode([]));
}

if (!file_exists($shopFile)) {
    // 创建包含30个称号的商店数据
    $defaultShop = [
        ['id' => 1, 'name' => '新手玩家', 'color' => '#9E9E9E', 'cost' => 10],
        ['id' => 2, 'name' => '活跃用户', 'color' => '#4CAF50', 'cost' => 20],
        ['id' => 3, 'name' => '社区之星', 'color' => '#FFC107', 'cost' => 30],
        ['id' => 4, 'name' => '尊贵会员', 'color' => '#9C27B0', 'cost' => 40],
        ['id' => 5, 'name' => '元老玩家', 'color' => '#2196F3', '极速聊天cost' => 50],
        ['id' => 6, 'name' => '传奇玩家', 'color' => '#E91E63', 'cost' => 60],
        ['id' => 7, 'name' => '游戏大师', 'color' => '#795548', 'cost' => 35],
        ['id' => 8, 'name' => '聊天达人', 'color' => '#607D8B', 'cost' => 25],
        ['id' => 9, 'name' => '社交之星', 'color' => '#00BCD4', 'cost' => 45],
        ['id' => 10, 'name' => '创意先锋', 'color' => '#8BC34A', 'cost' => 55],
        ['id' => 11, 'name' => '技术专家', 'color' => '#FF5722', 'cost' => 15],
        ['id' => 12, 'name' => '内容创作者', 'color' => '#673AB7', 'cost' => 35],
        ['id' => 13, 'name' => '论坛元老', 'color' => '#3F51B5', 'cost' => 55],
        ['id' => 14, 'name' => '社区守护者', 'color' => '#009688', 'cost' => 25],
        ['id' => 15, 'name' => '知识宝库', 'color' => '#FF9800', 'cost' => 45],
        ['id' => 16, 'name' => '幽默大师', 'color' => '#CDDC39', 'cost' => 20],
        ['id' => 17, 'name' => '摄影达人', 'color' => '#00BCD4', 'cost' => 30],
        ['id' => 18, 'name' => '音乐爱好者', 'color' => '#9C27B0', 'cost' => 40],
        ['id' => 19, 'name' => '旅行家', 'color' => '#4CAF50', 'cost' => 50],
        ['id' => 20, 'name' => '美食家', 'color' => '#FF5722', 'cost' => 30],
        ['id' => 21, 'name' => '书虫', 'color' => '#795548', 'cost' => 20],
        ['id' => 22, 'name' => '电影迷', 'color' => '#2196F3', 'cost' => 25],
        ['id' => 23, 'name' => '体育健将', 'color' => '#FFC107', 'cost' => 35],
        ['id' => 24, 'name' => '健身达人', 'color' => '#E91E63', 'cost' => 45],
        ['id' => 25, 'name' => '编程高手', 'color' => '#3F51B5', 'cost' => 55],
        ['id' => 26, 'name' => '设计师', 'color' => '#009688', 'cost' => 40],
        ['id' => 27, 'name' => '作家', 'color' => '#673AB7', 'cost' => 30],
        ['id' => 28, 'name' => '教育家', 'color' => '#8BC34A', 'cost' => 50],
        ['id' => 29, '极速聊天name' => '慈善家', 'color' => '#FF9800', 'cost' => 60],
        ['id' => 30, 'name' => '环保卫士', 'color' => '#4CAF50', 'cost' => 40]
    ];
    file_put_contents($shopFile, json_encode($defaultShop, JSON_PRETTY_PRINT));
}

// 加载用户称号数据
$titlesData = json_decode(file_get_contents($titlesFile), true);
if ($titlesData === null) {
    $titlesData = [];
}

// 加载用户点数数据
$pointsData = json_decode(file_get_contents($pointsFile), true);
if ($pointsData === null) {
    $pointsData = [];
}

// 加载商店数据
$shopData = json_decode(file_get_contents($shopFile), true);
if ($shopData === null) {
    $shopData = [];
}

// 初始化当前用户数据
if (!isset($titlesData[$currentUser]) || !is_array($titlesData[$currentUser])) {
    $titlesData[$currentUser] = [];
}

if (!isset($pointsData[$currentUser]) || !is_array($pointsData[$currentUser])) {
    $pointsData[$currentUser] = [
        'points' => 0,
        'last_signin' => null
    ];
}

$userTitles = $titlesData[$currentUser];
$userPoints = $pointsData[$currentUser];
$points = $userPoints['points'] ?? 0;
$lastSignin = $userPoints['last_signin'] ?? null;

// 检查今天是否已签到
$today = date('Y-m-d');
$canSignin = $lastSignin !== $today;

// 操作日志函数
function logAction($action, $details = '') {
    global $logFile, $currentUser;
    $ip = $_SERVER['REMOTE_ADDR'];
    $logEntry = date('Y-m-d H:i:s') . " | USER: $currentUser | IP: $ip | ACTION: $action | $details";
    file_put_contents($logFile, $logEntry . PHP_EOL, FILE_APPEND);
}

// 处理签到请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['signin']) && $canSignin) {
    // 增加点数
    $userPoints['points'] += 2;
    $userPoints['last_signin'] = $today;
    
    // 更新数据
    $pointsData[$currentUser] = $userPoints;
    file_put_contents($pointsFile, json_encode($pointsData, JSON_PRETTY_PRINT));
    
    $signinSuccess = true;
    $canSignin = false;
    $points = $userPoints['points'];
    $notificationMessage = "签到成功！获得2点数";
    logAction('SIGNIN', 'Earned 2 points');
}

// 处理购买称号请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['buy_title'])) {
    $titleId = (int)$_POST['title_id'];
    
    // 查找称号
    $titleToBuy = null;
    foreach ($shopData as $title) {
        if ($title['id'] === $titleId) {
            $titleToBuy = $title;
            break;
        }
    }
    
    if ($titleToBuy) {
        // 检查点数是否足够
        if ($points >= $titleToBuy['cost']) {
            // 检查用户是否已拥有该称号
            $alreadyOwned = false;
            foreach ($userTitles as $title) {
                if ($title['name'] === $titleToBuy['name']) {
                    $alreadyOwned = true;
                    break;
                }
            }
            
            if (!$alreadyOwned) {
                // 检查用户称号数量是否已达上限
                if (count($userTitles) < 3) {
                    // 扣除点数
                    $userPoints['points'] -= $titleToBuy['cost'];
                    $points = $userPoints['points'];
                    
                    // 更新点数数据
                    $pointsData[$currentUser] = $userPoints;
                    file_put_contents($pointsFile, json_encode($pointsData, JSON_PRETTY_PRINT));
                    
                    // 添加新称号
                    $userTitles[] = [
                        'name' => $titleToBuy['name'],
                        'color' => $titleToBuy['color'],
                        'type' => 'purchased',
                        'cost' => $titleToBuy['cost']
                    ];
                    
                    // 更新称号数据
                    $titlesData[$currentUser] = $userTitles;
                    file_put_contents($titlesFile, json_encode($titlesData, JSON_PRETTY_PRINT));
                    
                    $purchaseSuccess = true;
                    $notificationMessage = "成功获得称号: {$titleToBuy['name']}";
                    logAction('BUY_TITLE', "Purchased: {$titleToBuy['name']} for {$titleToBuy['cost']} points");
                } else {
                    $notificationMessage = "称号数量已达上限 (最多3个)";
                    logAction('BUY_FAIL', "Title limit reached");
                }
            } else {
                $notificationMessage = "您已拥有该称号";
                logAction('BUY_FAIL', "Already owned: {$titleToBuy['name']}");
            }
        } else {
            $notificationMessage = "点数不足";
            logAction('BUY_FAIL', "Insufficient points for title ID: $titleId");
        }
    } else {
        $notificationMessage = "称号不存在";
        logAction('INVALID_BUY', "Invalid title ID: $titleId");
    }
}

// 禁止使用的称号关键词
$bannedKeywords = ['管理员', '管理', '官方', '系统', 'admin', 'mod', 'staff', '客服', '客服人员', '支持', 'support'];

// 处理自定义称号请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['create_custom_title'])) {
    $customName = trim($_POST['custom_name']);
    $customColor = $_POST['custom_color'];
    
    // 检查是否包含禁止关键词
    $containsBannedKeyword = false;
    foreach ($bannedKeywords as $keyword) {
        if (stripos($customName, $keyword) !== false) {
            $containsBannedKeyword = true;
            break;
        }
    }
    
    if (empty($customName)) {
        $notificationMessage = "称号名称不能为空";
        logAction('CUSTOM_FAIL', "Empty title name");
    } elseif ($containsBannedKeyword) {
        $notificationMessage = "称号包含禁止使用的关键词，请重新创建";
        logAction('CUSTOM_FAIL', "Banned keyword in: $customName");
    } elseif (mb_strlen($customName) > 10) {
        $notificationMessage = "称号名称不能超过10个字符";
        logAction('CUSTOM_FAIL', "Title too long: $customName");
    } elseif ($points < 60) {
        $notificationMessage = "需要60点数才能创建自定义称号";
        logAction('CUSTOM_FAIL', "Insufficient points for custom title");
    } elseif (count($userTitles) >= 3) {
        $notificationMessage = "称号数量已达上限 (最多3个)";
        logAction('CUSTOM_FAIL', "Title limit reached");
    } else {
        // 扣除点数
        $userPoints['points'] -= 60;
        $points = $userPoints['points'];
        
        // 更新点数数据
        $pointsData[$currentUser] = $userPoints;
        file_put_contents($pointsFile, json_encode($pointsData, JSON_PRETTY_PRINT));
        
        // 添加自定义称号
        $userTitles[] = [
            'name' => $customName,
            'color' => $customColor,
            'type' => 'custom',
            'cost' => 60
        ];
        
        // 更新称号数据
        $titlesData[$currentUser] = $userTitles;
        file_put_contents($titlesFile, json_encode($titlesData, JSON_PRETTY_PRINT));
        
        $notificationMessage = "成功创建自定义称号: $customName";
        logAction('CREATE_CUSTOM', "Created custom title: $customName");
    }
}

// 处理删除称号请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_title'])) {
    $titleName = $_POST['title_name'];
    
    $newTitles = [];
    $deletedTitle = null;
    foreach ($userTitles as $title) {
        if ($title['name'] === $titleName) {
            $deletedTitle = $title;
        } else {
            $newTitles[] = $title;
        }
    }
    
    if ($deletedTitle) {
        // 计算退还点数 - 50%的成本
        $refundAmount = floor($deletedTitle['cost'] * 0.5);
        $userPoints['points'] += $refundAmount;
        $points = $userPoints['points'];
        
        // 更新点数数据
        $pointsData[$currentUser] = $userPoints;
        file_put_contents($pointsFile, json_encode($pointsData, JSON_PRETTY_PRINT));
        
        // 更新称号数据
        $titlesData[$currentUser] = $newTitles;
        file_put_contents($titlesFile, json_encode($titlesData, JSON_PRETTY_PRINT));
        $userTitles = $newTitles;
        
        $notificationMessage = "称号 '{$deletedTitle['name']}' 已删除，退还 {$refundAmount} 点数";
        logAction('DELETE_TITLE', "Deleted: {$deletedTitle['name']}, refunded $refundAmount points");
    } else {
        $notificationMessage = "未找到该称号";
        logAction('DELETE_FAIL', "Title not found: $titleName");
    }
}

// 生成CSRF令牌
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>称号系统 - JIIL微聊</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            min-height: 100vh;
        }
        
        /* 顶部导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(135deg, #1a2a6c, #2a5298);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
            z-index: 100;
        }
        
        .back-btn {
            background: rgba(255,255,255,0.15);
            border: none;
            color: white;
            font-size: 20px;
            margin-right: 15px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .back-btn:hover {
            background: rgba(255,255,255,0.25);
        }
        
        .navbar-title {
            font-size: 20px;
            font-weight: 600;
            flex-grow: 1;
        }
        
        .titles-btn {
            background: rgba(255,255,255,0.15);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .titles-btn:hover {
            background: rgba(255,255,255,0.25);
        }
        
        /* 主容器 */
        .container {
            max-width: 800px;
            margin: 80px auto 30px;
            padding: 0 20px;
        }
        
        /* 用户信息卡片 */
        .user-card {
            background: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3498db, #2c3e50);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 36px;
            font-weight: bold;
            flex-shrink: 0;
        }
        
        .user-info {
            flex-grow: 1;
        }
        
        .username {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        
        .user-titles {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }
        
        .user-title {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 13px;
            font-weight: 500;
            color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        /* 点数信息 */
        .points-info {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            text-align: center;
        }
        
        .points-label {
            font-size: 16px;
            color: #666;
            margin-bottom: 5px;
        }
        
        .points-amount {
            font-size: 32px;
            font-weight: 700;
            color: #3b82f6;
        }
        
        .points-amount::before {
            content: "";
            margin-right: 2px;
        }
        
        /* 签到卡片 */
        .signin-card {
            background: white;
            border-radius: 20极速聊天px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            margin-bottom: 25px;
            text-align: center;
        }
        
        .signin-title {
            font-size: 22px;
            color: #333;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .signin-reward {
            font-size: 18px;
            color: #666;
            margin-bottom: 25px;
        }
        
        .signin-reward .amount {
            font-weight: 700;
            color: #3b82f6;
        }
        
        .signin-btn {
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 50px;
            padding: 14px 40px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .signin-btn:hover {
            background: #2980b9;
            transform: scale(1.05);
        }
        
        .signin-btn:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
            transform: none !important;
        }
        
        /* 称号商店 */
        .titles-section {
            background: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            margin-bottom: 25px;
        }
        
        .section-title {
            font-size: 22px;
            color: #333;
            margin-bottom: 20px;
            font-weight: 600;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f2f5;
        }
        
        .titles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .title-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .title-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        .title-name {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .title-color {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        
        .title-info {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            font-size: 14px;
            color: #666;
        }
        
        .title-cost {
            font-weight: 600;
            color: #e91e63;
        }
        
        .buy-btn {
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 15px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 15px;
            width: 100%;
        }
        
        .buy-btn:hover {
            background: #2980b9;
        }
        
        .buy-btn:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
        }
        
        /* 自定义称号区域 */
        .custom-title-card {
            background: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            margin-bottom: 25px;
        }
        
        .custom-form {
            display: grid;
            grid-template-columns: 1fr 1fr auto;
            gap: 15px;
            align-items: end;
        }
        
        .form-group {
            margin-bottom: 0;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #666;
        }
        
        .name-input {
            width: 100%;
            padding: 14px;
            border: 1px solid #e9ecef;
            border-radius: 25px;
            font-size: 15px;
            resize: none;
        }
        
        .color-select {
            width: 100%;
            padding: 14px;
            border: 1px solid #e9ecef;
            border-radius: 25px;
            font-size: 15px;
            background: white;
            cursor: pointer;
        }
        
        .create-btn {
            background: #e91e63;
            color: white;
            border: none;
            border-radius: 25px;
            padding: 14px 20px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        
        .create-btn:hover {
            background: #c2185b;
        }
        
        .create-btn:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
        }
        
        .custom-cost {
            text-align: center;
            margin-top: 15px;
            font-size: 18px;
            font-weight: 600;
            color: #e91e63;
        }
        
        /* 提示信息 */
        .custom-tips {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 15px;
            margin-top: 20px;
            font-size: 14px;
            color: #666;
            border-left: 4px solid #3b82f6;
        }
        
        .tips-title {
            font-weight: 600;
            margin-bottom: 8px;
            color: #333;
        }
        
        .tips-list {
            padding-left: 20px;
        }
        
        .tips-list li {
            margin-bottom: 5px;
        }
        
        .warning {
            color: #e91e63;
            font-weight: 500;
        }
        
        /* 通知消息 */
        .notification {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px 25px;
            background: rgba(0, 0, 0, 0.85);
            color: white;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 1000;
            animation: slideIn 0.3s, fadeOut 0.5s 4.5s forwards;
        }
        
        @keyframes slideIn {
            from { top: -50px; opacity: 0; }
            to { top: 80px; opacity: 1; }
        }
        
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; visibility: hidden; }
        }
        
        .notification-icon {
            font-size: 20px;
        }
        
        .notification.success {
            background: rgba(46, 204, 113, 0.9);
        }
        
        .notification.error {
            background: rgba(231, 76, 60, 0.9);
        }
        
        /* 称号仓库模态框 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        
        .modal-content {
            background: white;
            border-radius: 20px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 30px;
            box-shadow: 0 15px 50px rgba(0,0,0,0.2);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f2f5;
        }
        
        .modal-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }
        
        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
        }
        
        .titles-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 15px;
        }
        
        .user-title-item {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        
        .title-display {
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            color: white;
        }
        
        .title-type {
            font-size: 12px;
            color: #666;
        }
        
        .delete-btn {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .delete-btn:hover {
            background: #c0392b;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }
            
            .user-card {
                flex-direction: column;
                text-align: center;
            }
            
            .titles-grid {
                grid-template-columns: 1fr;
            }
            
            .custom-form {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <button class="back-btn" onclick="history.back()">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="navbar-title">称号系统</div>
        <button class="titles-btn" id="titlesBtn">
            <i class="fas fa-archive"></i>
        </button>
    </div>
    
    <div class="container">
        <?php if (isset($notificationMessage)): ?>
            <div class="notification <?= isset($purchaseSuccess) || isset($signinSuccess) ? 'success' : 'error' ?>">
                <i class="fas <?= isset($purchaseSuccess) || isset($signinSuccess) ? 'fa-check-circle' : 'fa-exclamation-circle' ?> notification-icon"></i>
                <span><?= $notificationMessage ?></span>
            </div>
        <?php endif; ?>
        
        <!-- 用户信息卡片 -->
        <div class="user-card">
            <div class="user-avatar">
                <?= substr($currentUser, 0, 1) ?>
            </div>
            <div class="user-info">
                <div class="username"><?= $currentUser ?></div>
                <div class="user-titles">
                    <?php foreach ($userTitles as $title): ?>
                        <span class="user-title" style="background: <?= $title['color'] ?>">
                            <?= $title['name'] ?>
                        </span>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="points-info">
                <div class="points-label">可用点数</div>
                <div class="points-amount"><?= $points ?></div>
            </div>
        </div>
        
        <!-- 签到卡片 -->
        <div class="signin-card">
            <h2 class="signin-title">每日签到</h2>
            <p class="signin-reward">每日签到可获得 <span class="amount">2</span> 点数</p>
            
            <form method="POST">
                <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
                <button 
                    type="submit" 
                    name="signin" 
                    class="signin-btn"
                    <?= !$canSignin ? 'disabled' : '' ?>
                >
                    <?php if ($canSignin): ?>
                        <i class="fas fa-calendar-check"></i> 立即签到
                    <?php else: ?>
                        <i class="fas fa-calendar-check"></i> 今日已签到
                    <?php endif; ?>
                </button>
            </form>
        </div>
        
        <!-- 称号商店 -->
        <div class="titles-section">
            <h2 class="section-title">称号商店</h2>
            
            <div class="titles-grid">
                <?php foreach ($shopData as $title): ?>
                    <div class="title-card">
                        <div class="title-name">
                            <span class="title-color" style="background: <?= $title['color'] ?>"></span>
                            <?= $title['name'] ?>
                        </div>
                        <div class="title-info">
                            <span class="title-cost"><?= $title['cost'] ?> 点数</span>
                        </div>
                        
                        <form method="POST">
                            <input type="hidden" name="title_id" value="<?= $title['id'] ?>">
                            <button 
                                type="submit" 
                                name="buy_title" 
                                class="buy-btn"
                                <?= $points < $title['cost'] || count($userTitles) >= 3 ? 'disabled' : '' ?>
                            >
                                获取称号
                            </button>
                        </form>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        
        <!-- 自定义称号区域 -->
        <div class="custom-title-card">
            <h2 class="section-title">创建自定义称号</h2>
            
            <form class="custom-form" method="POST">
                <div class="form-group">
                    <label class="form-label">称号名称</label>
                    <input 
                        type="text" 
                        name="custom_name" 
                        class="name-input" 
                        placeholder="输入称号名称 (最多10字)" 
                        maxlength="10"
                        required
                    >
                </div>
                
                <div class="form-group">
                    <label class="form-label">选择颜色</label>
                    <select name="custom_color" class="color-select" required>
                        <option value="#FF5722">橙色</option>
                        <option value="#4CAF50">绿色</option>
                        <option value="#2196F3">蓝色</option>
                        <option value="#9C27B0">紫色</option>
                        <option value="#FF9800">琥珀色</option>
                        <option value="#795548">棕色</option>
                        <option value="#607D8B">蓝灰色</option>
                        <option value="#E91E63">粉色</option>
                        <option value="#00BCD4">青色</option>
                        <option value="#8BC34A">浅绿色</option>
                    </select>
                </div>
                
                <button 
                    type="submit" 
                    name="create_custom_title" 
                    class="create-btn"
                    <?= $points < 60 || count($userTitles) >= 3 ? 'disabled' : '' ?>
                >
                    <i class="fas fa-plus"></i> 创建称号
                </button>
            </form>
            
            <div class="custom-cost">
                需要 60 点数
            </div>
            
            <!-- 提示信息 -->
            <div class="custom-tips">
                <div class="tips-title">重要提示：</div>
                <ul class="tips-list">
                    <li>每个用户最多拥有 <strong>3个</strong> 称号</li>
                    <li>称号创建后 <strong>不可更改</strong>，只能删除</li>
                    <li>删除称号将退还 <strong>50%</strong> 点数</li>
                    <li class="warning">禁止创建包含危险、违法内容或冒充管理组的称号</li>
                    <li class="warning">违规称号将被立即删除且不退还点数</li>
                </ul>
            </div>
        </div>
    </div>
    
    <!-- 称号仓库模态框 -->
    <div class="modal-overlay" id="titlesModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">称号仓库</h3>
                <button class="close-btn" id="closeModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="titles-container">
                <?php if (empty($userTitles)): ?>
                    <div class="empty-state">
                        <i class="fas fa-box-open" style="font-size: 50px; color: #ddd; margin-bottom: 15px;"></i>
                        <p>称号仓库为空</p>
                    </div>
                <?php else: ?>
                    <?php foreach ($userTitles as $title): ?>
                        <div class="user-title-item">
                            <span 
                                class="title-display" 
                                style="background: <?= $title['color'] ?>"
                            >
                                <?= $title['name'] ?>
                            </span>
                            <div class="title-type">
                                <?= $title['type'] === 'custom' ? '自定义称号' : '购买称号' ?>
                            </div>
                            <form method="POST">
                                <input type="hidden" name="title_name" value="<?= $title['name'] ?>">
                                <button type="submit" name="delete_title" class="delete-btn">
                                    <i class="fas fa-trash"></i> 删除 (退还<?= floor($title['cost'] * 0.5) ?>点)
                                </button>
                            </form>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
    
    <script>
        // 显示称号仓库
        document.getElementById('titlesBtn').addEventListener('click', function() {
            document.getElementById('titlesModal').style.display = 'flex';
        });
        
        // 关闭模态框
        document.getElementById('closeModal').addEventListener('click', function() {
            document.getElementById('titlesModal').style.display = 'none';
        });
        
        // 点击模态框外部关闭
        document.getElementById('titlesModal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.style.display = 'none';
            }
        });
        
        // 确保页面加载时不会显示模态框
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('titlesModal').style.display = 'none';
        });
    </script>
</body>
</html>